<template>
  <div class="layout-header" :class="{ 'layout-header-light': true }">
    <!--左侧菜单-->
    <div class="layout-header-left">
      <!-- 收缩菜单 -->
      <div
        class="ml-1 layout-header-trigger layout-header-trigger-min"
        @click="() => $emit('update:collapsed', !collapsed)"
      >
        <NIcon size="18" v-if="collapsed">
          <MenuUnfoldOutlined />
        </NIcon>
        <NIcon size="18" v-else>
          <MenuFoldOutlined />
        </NIcon>
      </div>
      <!--顶部菜单-->
      <div class="layout-header-left">
        <NMenu
          v-model:value="menuSelectAppKey"
          :options="apps"
          default-value="system"
          mode="horizontal"
          class="n-menu-horizontal-light"
          @update:value="switchApp"
        />
      </div>
    </div>
    <!--右侧菜单-->
    <div class="layout-header-right">
      <div class="layout-header-trigger layout-header-trigger-min" v-for="item in iconList" :key="item.icon.name">
        <n-tooltip placement="bottom">
          <template #trigger>
            <NIcon size="18">
              <component :is="item.icon" v-on="item.eventObject || {}" />
            </NIcon>
          </template>
          <span>{{ item.tips }}</span>
        </n-tooltip>
      </div>
      <!-- 我的 -->
      <div class="layout-header-trigger layout-header-trigger-min">
        <n-dropdown trigger="hover" @select="avatarSelect" :options="avatarOptions">
          <div class="avatar">
            <NAvatar>
              {{ username }}
            </NAvatar>
          </div>
        </n-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
import { useUserStore } from '@/store/modules/user'
import { buildBreadcrumb } from '@/utils'
import Menu from '@/layouts/default/Menu.vue'
import { MenuUnfoldOutlined, MenuFoldOutlined, SearchOutlined } from '@vicons/antd'
import { UserOnline } from '@vicons/carbon'

export default defineComponent({
  name: 'Header',
  components: {
    UserOnline,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    SearchOutlined,
    Menu
  },
  props: {
    collapsed: {
      type: Boolean,
      required: true
    }
  },
  setup() {
    const userStore = useUserStore()
    const message = useMessage()
    const { username, apps, menus } = userStore?.userInfo || {}

    const router = useRouter()
    const route = useRoute()

    const breadcrumbList = computed(() => {
      return buildBreadcrumb(route.matched)
    })

    const dropdownSelect = (key: any) => {
      router.push({ name: key })
    }

    // 退出
    const doLogout = () => {
      userStore.logout().then(() => {
        message.success('成功退出')
        router.replace({
          name: 'Login',
          query: {
            redirect: route.fullPath
          }
        })
        // .finally(() => location.reload());
      })
    }

    const crumbsSetting = {
      // 是否显示
      show: true,
      // 显示图标
      showIcon: false
    }

    // 图标列表
    const iconList = [
      {
        icon: 'SearchOutlined',
        tips: 'EDCOM',
        eventObject: {
          click: () => window.open('http://10.70.82.47:9080/edcom')
        }
      },
      {
        icon: 'UserOnline',
        tips: '在线/离线'
      }
    ]

    const avatarOptions = [
      {
        label: '个人设置',
        key: 1
      },
      {
        label: '退出登录',
        key: 2
      }
    ]
    // 菜单事件
    const avatarSelect = (key: any) => {
      switch (key) {
        case 1:
          console.log('avatarSelect-->', key)
          break
        case 2:
          doLogout()
          break
      }
    }

    const state = reactive({
      username: username || '',
      navMode: 'vertical', // horizontal
      navTheme: 'dark',
      crumbsSetting: crumbsSetting
    })

    const menuSelectAppKey = ref('system')

    const switchApp = (appCode: any) => {
      console.log('appCode-->', appCode)
    }

    return {
      ...toRefs(state),
      breadcrumbList,
      iconList,
      avatarOptions,
      dropdownSelect,
      avatarSelect,
      menuSelectAppKey,
      apps,
      switchApp
    }
  }
})
</script>

<style lang="less" scoped>
.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  height: @header-height;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  transition: all 0.2s ease-in-out;
  width: 100%;
  z-index: 11;

  &-left {
    display: flex;
    align-items: center;

    ::v-deep(.ant-breadcrumb span:last-child .link-text) {
      color: #515a6e;
    }

    ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
      color: #fff;
    }

    .n-breadcrumb {
      display: inline-block;
    }
  }

  &-trigger {
    display: inline-block;
    width: @header-height;
    height: @header-height;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    .n-icon {
      display: flex;
      align-items: center;
      height: @header-height;
      line-height: @header-height;
    }

    &:hover {
      background: hsla(0, 0%, 100%, 0.08);
    }

    .anticon {
      font-size: 16px;
      color: #515a6e;
    }
  }

  &-trigger-min {
    width: auto;
    padding: 0 12px;
  }

  &-right {
    display: flex;
    align-items: center;
    margin-right: 20px;

    .avatar {
      display: flex;
      align-items: center;
      height: @header-height;
    }

    > * {
      cursor: pointer;
    }
  }
}
// 默认theme
.layout-header-light {
  background: #fff;
  color: #515a6e;

  .n-icon {
    color: #515a6e;
  }

  .layout-header-left {
    ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
      color: #515a6e;
    }
  }

  .layout-header-trigger {
    &:hover {
      background: #f8f8f9;
    }
  }
}
</style>
